<template>
  <div class="xtx-goods-page">
    <div class="container">
      <!-- 面包屑 -->
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem to="/">家电</XtxBreadItem>
        <XtxBreadItem to="/">居家</XtxBreadItem>
        <XtxBreadItem to="/">一脚蹬</XtxBreadItem>
      </XtxBread>
      <!-- 商品信息 -->
      <div class="goods-info">
        <div class="media">
          <!-- 预览组件 -->
          <!-- <XtxImageView /> -->
          <!-- 销量 -->
          <GoodsSales />
        </div>
        <!-- 商品信息区 -->
        <div class="spec">
          <!-- 商品信息区 -->
          <GoodsInfo></GoodsInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 销量组件
import GoodsSales from './components/goods-sales'
// 信息组件
import GoodsInfo from './components/goods-info'
export default {
  name: 'XtxGoodsPage',
  components: { GoodsSales, GoodsInfo }
}
</script>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;

  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
    background-color: #ccc;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
</style>
